<template>
    <div>
        <van-row>
            <van-col span="8">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item :title="item.title" v-for="(item, index) in listzuo" :key="index" />
                </van-sidebar>
            </van-col>
            <van-col span="16">
                <div class="right">
                    <div>热门景点</div>
                    <van-grid :column-num="2">
                        <van-grid-item v-for="(item, i) in listyou" :key="i">
                            <van-image :src="item.img" />{{ item.title }}
                        </van-grid-item>
                    </van-grid>
                    <div v-for="(item, index) in listyou" :key="index" class="label">{{ item.title }}</div>
                </div>
            </van-col>

        </van-row>


    </div>
</template>

<script>
import { Travelzuo, Travelyous } from '@/api/guo/ferrMain'
export default {
    data() {
        return {
            activeKey: '0',
            listzuo: [],
            listyou: []
        };
    },

    mounted() {
        this.getTravelzuo()
        this.getTravelyou()
    },

    methods: {
        async getTravelzuo() {
            //搜索页左侧标签
            const { data } = await Travelzuo()
            console.log(data)
            this.listzuo = data

        },
        async getTravelyou() {
            //搜索页左侧标签
            const { data } = await Travelyous()
            console.log(data)
            this.listyou = data

        }
    }
}
</script>

<style scoped lang="scss">
.right {
    text-align: center;
}

.label {
    float: left;
    margin: 10px;
    width: 60px;
    height: 20px;
    // background-color: aqua;
    border: 1px solid #ccc;
}
</style>